
<template>
  <div class="img1">
    <div style="height: 100px; float: top;">
    </div>
    <div style="  width: 470px; height: 500px; margin-left: 37%;background: #ffffff; border-radius: 10px;">
     <div style="padding-top: 45px;margin-bottom: 50px">
       <div  style="font-size: 30px;font-family:'Segoe UI Black';text-align: center">账号登录</div>

     </div>
      <el-form ref="userForm" :model="loginForm" style="margin-left: 20px; margin-right: 20px;" :rules="rules" >
        <el-form-item prop="username" >
          <el-input type="text" v-model="loginForm.username" placeholder="账号/邮箱/手机号" autocomplete="off" style="width: 400px;" prefix-icon="el-icon-setting">
          </el-input>

        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码" style="width:400px;height: 50px"></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-radio  v-model="loginForm.type" label="teacher">我是老师</el-radio>
          <el-radio  v-model="loginForm.type" label="student">我是学生</el-radio>
        </el-form-item>
        <el-form-item>
          <el-checkbox>下次自动登录</el-checkbox>
          <span style="padding-left: 240px">忘记密码？</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" style="width: 430px" :loading="loadingStatus">登录</el-button>
        </el-form-item>
        <el-form-item align="right">
        <router-link to='/register'>
          <a style="text-decoration: none">
            <span style="color: gray;text-decoration: none" >还没有账号？</span>
            <span style="color: blue;text-decoration: none">去注册</span>
          </a>
        </router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../api/require'

export default {
  name: 'Login',
  data () {
    return {
      textTitle: '登录-简单好用的互动课堂管理工具',
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        type: [{ required: true, message: '请勾选角色', trigger: 'blur' }]
      },
      loginForm: {
        username: '',
        password: '',
        type: ''
      },
      user: {
        name: '',
        uid: '',
        tid: '',
        type: ''
      },
      loadingStatus: false

    }
  },
  methods: {
    submit () {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          login(this.loginForm).then(res => {
            console.log('adsadaswd', res)
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: '登陆成功',
                type: 'success'
              })
              if (this.loginForm.type === 'student') {
                sessionStorage.setItem('sid', res.data.obj.sid)
                sessionStorage.setItem('username', res.data.obj.username)
                sessionStorage.setItem('name', res.data.obj.name)
                sessionStorage.setItem('type', this.loginForm.type)
                this.$router.push({
                  path: '/mainStudent'
                })
              } else {
                sessionStorage.setItem('tid', res.data.obj.tid)
                sessionStorage.setItem('aid', res.data.obj.aid)
                sessionStorage.setItem('name', res.data.obj.name)
                sessionStorage.setItem('username', res.data.obj.username)
                sessionStorage.setItem('type', this.loginForm.type)
                this.$router.push({
                  path: '/teacher'
                })
              }
            } else {
              this.$message({
                showClose: true,
                message: '用户名或者密码错误',
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            message: '请输入所有字段',
            type: 'error'
          })
          // this.loadingStatus = false
        }
      })
    },
    captchaClick () {
      this.$refs.imgCaptcha.src = `http://127.0.0.1:9000/captcha?r=${Math.random()}`
    }

  }

}
</script>
<style scoped lang="scss">
  .img1 {
    width: 100%;
    height: 100%;
    background: url('../assets/images/loginBackground.jpg') center center no-repeat;
    background-size: cover;
  }
  a {
    text-decoration: none;
  }

</style>
